<template>
  <div class="update-password-wrapper">
    <el-form ref="form" :model="formData" label-position="right" size="large" :label-width="locale === 'EN'? 152 : 120" :rules="rules" @submit.prevent="onSubmit">
      <el-form-item prop="oldPwd" required :error="$t('accountInfo.required')" :label="$t('accountInfo.oldPwd')">
        <template #label>
          <span style="font-weight: 600">{{$t('accountInfo.oldPwd')}}</span>
        </template>
        <el-input
          type="text"
          show-password
          clearable
          class="input__default_theme"
          v-model="formData.oldPwd"
          :placeholder="$t('accountInfo.input')"
        />
      </el-form-item>
      <el-form-item prop="newPwd" required :error="$t('accountInfo.required')" :label="$t('accountInfo.newPwd')">
        <template #label>
          <span style="font-weight: 600">{{$t('accountInfo.newPwd')}}</span>
        </template>
        <el-input
          type="text"
          show-password
          clearable
          class="input__default_theme"
          v-model="formData.newPwd"
          :placeholder="$t('accountInfo.input')"
        />
      </el-form-item>
      <el-form-item prop="newAgain" required :error="$t('accountInfo.required')" :label="$t('accountInfo.repeatPwd')">
        <template #label>
          <span style="font-weight: 600">{{$t('accountInfo.repeatPwd')}}</span>
        </template>
        <el-input
          type="text"
          clearable
          show-password
          class="input__default_theme"
          v-model="formData.newAgain"
          :placeholder="$t('accountInfo.input')"
        />
      </el-form-item>
      <el-form-item>
        <div style="text-align: right; margin-top: 10px;padding-right: 2px;">
          <el-button size="large" native-type="submit" type="primary" class="buttons-primary">
            {{$t('accountInfo.update')}}
          </el-button>
          <el-button style="width: 150px" size="large" @click="onCancel" class="buttons-default">
            {{$t('accountInfo.cancel')}}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, type FormInstance } from "element-plus";
import { fetchUpdatePassword } from "@/http/setting";
import { useUserInfoStore } from "@/stores/user";
import type { Http } from "@/interface/Http";
import { useI18n } from "vue-i18n";

interface FormData {
  "oldPwd": string
  "newPwd": string
  "newAgain": string
  "username": string
}

const form = ref<FormInstance>();
const {locale, t} = useI18n();
const useUser = useUserInfoStore();
const emit = defineEmits<{
  (event: "cancel"):void
}>()
const formData = reactive<FormData>({
  oldPwd: "",
  newPwd: "",
  newAgain: "",
  username: useUser.userInfo?.user?.username
});
const validate = (rule: any, value: string, callback: any) => {
  if (value !== formData.newPwd) {
    callback(new Error(t("accountInfo.repeatError")));
  } else {
    callback();
  }
};
const validateSpecialWord = (rule: any, value: string, callback: any) => {
  const pattern = /^[a-zA-Z0-9_?]+$/g;
  if (pattern.test(value)) {
    callback();
  } else {
    callback(new Error( t("accountInfo.fieldError")));
  }
};
const rules = {
  oldPwd: [
    {
      required: true,
      message: t("accountInfo.required"),
    },
    {

      min: 6,
      max: 30,
      message: t("accountInfo.lengthError")
    },
    {
      validator: validateSpecialWord
    }
  ],
  newPwd: [
    {
      required: true,
      message: t("accountInfo.required"),
    },
    {

      min: 6,
      max: 30,
      message: t("accountInfo.lengthError")
    },
    {
      validator: validateSpecialWord
    }
  ],
  pwdAgain: [
    {
      required: true,
      message: t("accountInfo.required"),
    },
    {

      min: 6,
      max: 30,
      message: t("accountInfo.lengthError")
    },
    {
      validator: validate
    },
    {
      validator: validateSpecialWord
    }
  ]
};

const onValidate = (callback: (a:boolean,b:any) => void) => {
  if (form.value) {
    form.value.validate((result: boolean) => {
      if (result) {
        callback && callback(true, formData);
      } else {
        callback && callback(false, formData);
      }
    });
  }
};
const onSubmit = () => {
  if(form.value){
    form.value.validate((result: boolean) => {
      if(result){
        fetchUpdatePassword(
          formData
        ).then((res:Http.Response<any>)=>{
          if(res.code === 200){
            ElMessage({
              message: "密码已修改",
              icon: "Select", // 自定义图标
              type: "info",
              duration: 3000,
              offset: 50
            });
          }
        })
      }
    })
  }
}
const onCancel = ()=> {
  emit("cancel")
}
defineExpose({
  onValidate
});
</script>
<style scoped lang="scss">
@import "@/theme";
</style>
